<template>
  <div class="monitor">
    <div class="title">
      <p class="tip">问题单</p>
      <button @click="back" class="goBack">返回</button>
    </div>
    <div class="contain">
      <el-container>
        <el-header>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">超时未分发</el-menu-item>
            <el-menu-item index="2">超时未接手</el-menu-item>
            <el-menu-item index="3">超时无计划</el-menu-item>
            <el-menu-item index="4">超时未解决</el-menu-item>
            <el-menu-item index="5">超时未修改</el-menu-item>
            <el-menu-item index="6">超时未关闭</el-menu-item>
          </el-menu>
        </el-header>
        <el-main>
          <div class="main">
            <el-form :inline="true" class="demo-form-inline first">
              <el-form-item label="问题单号" prop="changeCode">
                <el-input
                  clearable
                  v-model="changeCode"
                  class="inline-input"
                  placeholder="请输入问题单号"
                />
              </el-form-item>
              <el-form-item label="问题标题" prop="changeTitle">
                <el-input
                  clearable
                  v-model="changeTitle"
                  class="inline-input"
                  placeholder="请输入问题标题"
                />
              </el-form-item>
              <el-form-item label="涉及系统" prop="sysName">
                <el-input
                  clearable
                  v-model="sysName"
                  class="inline-input"
                  placeholder="请输入系统名称"
                />
              </el-form-item>
              <el-form-item label="所属机构" prop="OrgName">
                <el-input
                  clearable
                  v-model="OrgName"
                  class="inline-input"
                  placeholder="请输入机构名称"
                />
              </el-form-item>
            </el-form>
            <el-form :inline="true" class="demo-form-inline" @submit.prevent>
              <el-form-item label="问题分类">
                <el-select
                  ref="ClassSelect"
                  v-model="questionClass"
                  placeholder="请选择问题分类"
                  style="width: 240px"
                  filterable
                  clearable
                  @visible-change="isShowSelectOptions"
                  @change="handleSelectPara($event, 'WT_FENLEI')"
                >
                  <el-option
                    v-for="(item, index) in restaurants"
                    :key="index + 1"
                    :label="item.value"
                    :value="item.valueDetail"
                  />
                </el-select>
                <el-autocomplete
                  v-if="false"
                  v-model="questionClass"
                  :fetch-suggestions="
                    (queryString, cb) => {
                      querySearch(queryString, cb, restaurants);
                    }
                  "
                  clearable
                  class="inline-input w-50"
                  placeholder="请选择问题分类"
                  @select="handleSelectPara($event, 'WT_FENLEI')"
                />
              </el-form-item>
              <el-form-item label="问题类型">
                <el-select
                  ref="TypeSelect"
                  v-model="questionType"
                  placeholder="请选择问题类型"
                  style="width: 240px"
                  filterable
                  clearable
                  @visible-change="isShowSelectOptions"
                  @change="handleSelectPara($event, 'WT_TYPE')"
                >
                  <el-option
                    v-for="(item, index) in TypeList"
                    :key="index + 1"
                    :label="item.value"
                    :value="item.valueDetail"
                  />
                </el-select>
                <el-autocomplete
                  v-if="false"
                  v-model="questionType"
                  :fetch-suggestions="
                    (queryString, cb) => {
                      querySearch(queryString, cb, TypeList);
                    }
                  "
                  clearable
                  class="inline-input w-50"
                  placeholder="请选择问题类型"
                  @select="handleSelectPara($event, 'WT_TYPE')"
                />
              </el-form-item>
              <el-form-item label="问题状态">
                <el-select
                  ref="StatusSelect"
                  v-model="questionStatus"
                  placeholder="请选择问题状态"
                  style="width: 240px"
                  filterable
                  clearable
                  @visible-change="isShowSelectOptions"
                  @change="handleSelectPara($event, 'issue_status')"
                >
                  <el-option
                    v-for="(item, index) in statusList"
                    :key="index + 1"
                    :label="item.value"
                    :value="item.valueDetail"
                  />
                </el-select>
                <el-autocomplete
                  v-if="false"
                  v-model="questionStatus"
                  :fetch-suggestions="
                    (queryString, cb) => {
                      querySearch(queryString, cb, statusList);
                    }
                  "
                  clearable
                  class="inline-input w-50"
                  placeholder="请选择问题状态"
                  @select="handleSelectPara($event, 'issue_status')"
                />
              </el-form-item>
              <el-form-item label="建设部门">
                <el-input
                  clearable
                  v-model="buildDept"
                  class="inline-input"
                  placeholder="请输入建设部门"
                />
              </el-form-item>
              <el-form-item class="button">
                <el-button @click="detail" class="btn deatil">查看详情</el-button>
                <el-button @click="search" @keyup.enter="monitor()" class="btn reset">
                  搜索
                </el-button>
                <el-button @click="resetForm" class="btn">重置</el-button>
                <el-button @click="downloadExcel('')" class="btn">导出</el-button>
                <el-dropdown trigger="click" v-if="false">
                  <span class="el-dropdown-link">
                    导出<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        icon="el-icon-plus"
                        @click="downloadExcel('currentPage')"
                      >
                        导出当前页</el-dropdown-item
                      >
                      <el-dropdown-item
                        icon="el-icon-circle-plus"
                        @click="downloadExcel('')"
                      >
                        导出所有页</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-form-item>
            </el-form>
          </div>
          <div class="tableBox">
            <div class="desc">
              <img src="../../assets/images/bbsm.png" alt="" />
              {{ desc }}
            </div>
            <div class="table" ref="container">
              <el-table
                :height="tableHeight"
                ref="multipleTableRef"
                :data="changeList"
                tooltip-effect="dark"
                row-key="getRowKey"
                v-loading="loading"
                element-loading-text="加载中"
                @row-click="handleRowClick"
                @select="selectChange"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  align="center"
                  :reserve-selection="false"
                  type="selection"
                ></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  align="center"
                  prop="questionNo"
                  label="问题单号"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="questionTitle"
                  label="问题标题"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="sysName"
                  label="涉及系统"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="questionOrgName"
                  label="所属机构"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="questionClass"
                  label="问题分类"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="questionType"
                  label="问题类型"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="questionStatus"
                  label="问题状态"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="buildDept"
                  label="建设单位"
                  show-overflow-tooltip
                ></el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <el-pagination
              ref="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
// import { changeOrganization } from '@/http/api';
// import { eventListExport, download } from '@/http/api/monitor';
import { paraType } from "@/http/api1";
import { questionStatusList, exportType, download } from "@/http/api/problem";
import { ref, onMounted, onBeforeUnmount, reactive, watch, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
//   import { useStore } from 'vuex';
//   const store = useStore();
const router = useRouter();
const route = useRoute();
const changeList = reactive([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const changeTitle = ref(""); // 标题
const changeCode = ref(""); // 单号
const sysName = ref(""); // 系统名称
const OrgName = ref(""); // 机构名称
const questionClass = ref(""); // 问题分类
const questionType = ref(""); // 问题类型
const questionStatus = ref(""); // 问题状态
const questionClassNum = ref(""); // 问题分类
const questionTypeNum = ref(""); // 问题类型
const questionStatusNum = ref(""); // 问题状态
const buildDept = ref(""); // 建设部门
const container = ref(null);
const tableHeight = ref(0);
const desc = ref("");
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const ClassSelect = ref();
const TypeSelect = ref();
const StatusSelect = ref();
const multipleTable = ref<User[]>([]);
// const eventId = ref(''); // 告警ID
const activeIndex = ref(route.params.type ? route.params.type : "1");
const statusList = reactive([]); // 问题状态列表
const restaurants = reactive([]); // 问题分类列表
const TypeList = reactive([]); // 问题类型列表
const loading = ref(false);
onMounted(() => {
  getPage();
  Event_status("WT_FENLEI", restaurants);
  Event_status("WT_TYPE", TypeList);
  Event_status("issue_status", statusList);
  enterKeyup();
  calHeight();
  StatusList();
  switch (activeIndex.value) {
    case "1":
      desc.value = "超时未分发：“待分发”状态超过5天的问题单";
      break;
    case "2":
      desc.value = "超时未接手：“待技术受理”状态超过5天的问题单";
      break;
    case "3":
      desc.value =
        "超时无计划：“技术受理中”状态下，问题等级为“高”且距“问题分发”任务完成超15天、问题等级为“中”距“问题分发”任务完成超25天、问题等级为“低”且距“问题分发”任务完成超35天的问题单";
      break;
    case "4":
      desc.value =
        "超时未解决：“技术受理中”状态下，问题等级为“高”且距“问题分发”任务完成超30天、问题等级为“中”距“问题分发”任务完成超90天、问题等级为“低”且距“问题分发”任务完成超180天的问题单";
      break;
    case "5":
      desc.value = "超时未修改：“退回待修改”状态超过7天的问题单";
      break;
    case "6":
      desc.value = "超时未关闭：“待关闭”状态超过14天的问题单";
      break;

    default:
      break;
  }
});
// 系统名过滤
const querySearch = (queryString: string, cb: any, obj: any) => {
  const results = queryString ? obj.filter(createFilter(queryString)) : obj;
  // 调用 callback 返回建议列表的数据

  cb(results);
};
const createFilter = (queryString: striing) => {
  return (restaurant) => {
    if (restaurant) {
      return restaurant.value.includes(queryString);
      // return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
    }
  };
};
const getPage = () => {
  const localPage = localStorage.getItem("monitorListPage");
  if (localPage != null) {
    pageNum.value = Number(localPage);
  } else {
    pageNum.value = 1;
  }
};
const handleSelect = (key: any) => {
  activeIndex.value = key;
  loading.value = true;
  console.log(activeIndex.value);
  switch (activeIndex.value) {
    case "1":
      desc.value = "超时未分发：“待分发”状态超过5天的问题单";
      break;
    case "2":
      desc.value = "超时未接手：“待技术受理”状态超过5天的问题单";
      break;
    case "3":
      desc.value =
        "超时无计划：“技术受理中”状态下，问题等级为“高”且距“问题分发”任务完成超15天、问题等级为“中”距“问题分发”任务完成超25天、问题等级为“低”且距“问题分发”任务完成超35天的问题单";
      break;
    case "4":
      desc.value =
        "“预解决（待解决）”状态下，问题等级为“高”且距“问题分发”任务完成超30天、问题等级为“中”距“问题分发”任务完成超90天、问题等级为“低”且距“问题分发”任务完成超180天的问题单";
      // "超时未解决：“技术受理中”状态下，问题等级为“高”且距“问题分发”任务完成超30天、问题等级为“中”距“问题分发”任务完成超90天、问题等级为“低”且距“问题分发”任务完成超180天的问题单";
      break;
    case "5":
      desc.value = "超时未修改：“退回待修改”状态超过7天的问题单";
      break;
    case "6":
      desc.value = "超时未关闭：“待关闭”状态超过14天的问题单";
      break;

    default:
      break;
  }
  StatusList();
};
const isShowSelectOptions = (isShowSelectOptions: any) => {
  if (!isShowSelectOptions) {
    console.log("隐藏");
    // ClassSelect.value.blur();
    nextTick(() => {
      ClassSelect.value.blur();
      TypeSelect.value.blur();
      StatusSelect.value.blur();
    });
  }
};
const monitor = () => {
  document.onkeydown = (e) => {
    if (e.keyCode == 13) {
      search();
    }
  };
};
const enterKeyupDestroyed = () => {
  document.removeEventListener("keyup", monitor());
};
const enterKeyup = () => {
  document.addEventListener("keyup", monitor());
};
const calHeight = () => {
  const rect = container.value.getBoundingClientRect();
  tableHeight.value = rect.height;
};
const Event_status = (type: string, arr: Array) => {
  paraType({
    type: type,
    pageNum: 1,
    pageSize: 100,
  }).then((res) => {
    if ((res as any).data.code !== 0) {
      ElMessage({
        message: (res as any).data.msg,
        type: "error",
      });
      return;
    }
    arr.length = 0;
    res.data.data.rows.forEach((item) => {
      (arr as any).push({
        value: item.valueDetail,
        valueDetail: item.value,
      });
    });
  });
};
const StatusList = () => {
  questionStatusList({
    pageNum: JSON.stringify(pageNum.value),
    pageSize: JSON.stringify(pageSize.value),
    type: activeIndex.value,
    questionNo: changeCode.value,
    questionTitle: changeTitle.value,
    sysName: sysName.value,
    questionOrgName: OrgName.value,
    questionClass: questionClassNum.value, // 问题分类
    questionType: questionTypeNum.value, // 问题类型
    questionStatus: questionStatusNum.value, // 问题状态
    buildDept: buildDept.value, // 建设部门
  }).then((res) => {
    if ((res as any).data.code !== 0) {
      ElMessage({
        message: (res as any).data.msg,
        type: "error",
      });
      return;
    }
    loading.value = false;
    changeList.length = 0;
    (changeList as any).push(...res.data.data.rows);
    total.value = res.data.data.total;
  });
};
// 导出当前页
const downloadExcel = (currentPage: any) => {
  exportType({
    currentPage: currentPage,
    type: activeIndex.value,
    questionNo: changeCode.value,
    questionTitle: changeTitle.value,
    sysName: sysName.value,
    questionOrgName: OrgName.value,
    questionClass: questionClassNum.value, // 问题分类
    questionType: questionTypeNum.value, // 问题类型
    questionStatus: questionStatusNum.value, // 问题状态
    buildDept: buildDept.value, // 建设部门
    pageNum: JSON.stringify(pageNum.value),
    pageSize: JSON.stringify(pageSize.value),
  }).then((res) => {
    if ((res as any).data.code !== 0) {
      ElMessage({
        message: (res as any).data.msg,
        type: "error",
      });
      return;
    }
    download_list(res.data.msg);
  });
};
const download_list = (type) => {
  download({
    fileName: type,
    delete: true,
  }).then((res) => {
    const link = document.createElement("a");
    let blob = new Blob([res.data], {
      type: "application/vnd.ms-excel",
    });
    link.style.display = "none";
    link.href = URL.createObjectURL(blob);
    link.download = type; //下载的文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
};
// const clearperson = () => {
//   handlePersonId.value = '';
// };
// const person_modify = () => {
//   handlePersonId.value = '';
// };

// 重置
const resetForm = () => {
  changeCode.value = ""; // 单号
  changeTitle.value = ""; // 标题
  sysName.value = "";
  OrgName.value = "";
  questionClass.value = ""; // 问题分类
  questionType.value = ""; // 问题类型
  questionStatus.value = ""; // 问题状态
  questionClassNum.value = ""; // 问题分类
  questionTypeNum.value = ""; // 问题类型
  questionStatusNum.value = ""; // 问题状态
  buildDept.value = "";
};
const search = () => {
  pageNum.value = 1;
  if (!questionClass.value) {
    questionClassNum.value = "";
  } else {
    questionClass.value = questionClass.value.replace(/(^\s*)|(\s*$)/g, "");
    if (!questionClassNum.value) {
      questionClassNum.value = questionClass.value;
    }
  }
  changeTitle.value = changeTitle.value.replace(/(^\s*)|(\s*$)/g, "");
  changeCode.value = changeCode.value.replace(/(^\s*)|(\s*$)/g, "");
  sysName.value = sysName.value.replace(/(^\s*)|(\s*$)/g, "");
  OrgName.value = OrgName.value.replace(/(^\s*)|(\s*$)/g, "");
  buildDept.value = buildDept.value.replace(/(^\s*)|(\s*$)/g, "");
  loading.value = true;
  StatusList();
};
// 分页
const handleSizeChange = (size) => {
  pageSize.value = size;
  loading.value = true;
  StatusList();
};
const handleCurrentChange = (num) => {
  pageNum.value = num;
  loading.value = true;
  localStorage.setItem("monitorListPage", num);
  StatusList();
};

const back = () => {
  // this.$router.go(-1);
  router.push({
    name: "restructure",
  });
  localStorage.removeItem("List_configuration");
};

// 点击行触发，选中或不选中复选框
const handleRowClick = (row) => {
  multipleTable.value = row;
  console.log(multipleTable.value);
  multipleTableRef.value.toggleRowSelection(row);
  selectChange(multipleTable.value);
};
const selectChange = (selection: string) => {
  if (selection.length > 1) {
    const del_row = selection.shift();
    multipleTableRef.value!.toggleRowSelection(del_row);
  }
};
const handleSelectionChange = (val: string) => {
  multipleTable.value = val;
};

const detail = () => {
  // router.push({
  //   name: "lssues_detail",
  //   params: {
  //     type: "activeIndex.value",
  //     value: "multipleTable.value[0].questionId",
  //   },
  // });
  if (!multipleTable.value.length) {
    ElMessage({
      message: "请先勾选查看的数据",
      type: "warning",
    });
  } else {
    router.push({
      name: "lssues_detail",
      params: {
        type: activeIndex.value,
        value: multipleTable.value[0].questionId,
      },
    });
  }
};

const handleSelectPara = (item, type) => {
  switch (type) {
    case "WT_FENLEI":
      questionClassNum.value = item;
      break;
    case "WT_TYPE":
      questionTypeNum.value = item;
      break;
    case "issue_status":
      questionStatusNum.value = item;
      break;
    default:
      break;
  }
};
onBeforeUnmount(() => {
  enterKeyupDestroyed();
});
watch(
  () => router.options.history.state.back,
  (newVal) => {
    if (newVal == "/restructure") {
      localStorage.removeItem("monitorListPage");
    } else if (newVal == "/monitor_detail") {
      const localPage = JSON.parse(localStorage.getItem("List_configuration"));
      // JSON.stringify
      (orgId.value = localPage.orgId), // 系统ID
        (state.value = localPage.state), // 系统名称
        (changeCode.value = localPage.changeCode), // 单号
        (changeTitle.value = localPage.changeTitle), // 标题
        (affiliatedCenter.value = localPage.affiliatedCenter), // 所属中心
        (eventLevel.value = localPage.eventLevel), //事件等级
        (responsibilityDept.value = localPage.responsibilityDept), // 当前责任处室
        (handlePerson.value = localPage.handlePerson), // 处理人
        (status.value = localPage.status), // 事件状态
        (statusCode.value = localPage.statusCode), // 事件状态参数码
        (overTime.value = localPage.overTime), // 超时事件
        (handlePersonId.value = localPage.handlePersonId);
    }
  },
  { immediate: true }
);
</script>
<style lang="less" scoped>
.monitor {
  width: 100%;
  height: 100vh;
  background: #eaeef4;
  padding: 20px;
  box-sizing: border-box;
  //background-image: url("../../assets/images/background-image.jpg");

  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    .tip {
      height: 34px;
      line-height: 34px;
      font-size: 18px;
      font-weight: 400;
      color: #46545d;
      margin: 0;
      padding: 0;
    }
    .goBack {
      background: #007af5;
      width: 80px;
      height: 34px;
      border: none;
      color: #fff;
      font-size: 12px;
      font-weight: 400;
      cursor: pointer;
    }
  }
  .tabs_item {
    height: calc(100% - 50px);
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    :deep(.el-tabs) {
      height: 100%;
      .el-tabs__header {
        .el-tabs__nav-wrap::after {
          width: 0;
        }
        .el-tabs__nav-wrap {
          .el-tabs__nav-scroll {
            .el-tabs__nav {
              .el-tabs__active-bar {
                height: 2px;
              }
              .el-tabs__item {
                font-size: 16px;
                font-weight: 400;
                color: #46545d;
                &.is-active {
                  font-weight: bold;
                  color: #007af5;
                }
              }
            }
          }
        }
      }
      .el-tabs__content {
        height: calc(100% - 40px);
        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
  .contain {
    background: #fff;
    height: calc(100% - 50px);
    .el-container {
      height: 100%;
      .el-header {
        .el-menu--horizontal {
          border-bottom: none;
          .el-menu-item {
            font-size: 16px;
            font-weight: 400;
            color: #46545d;
            &.is-active {
              font-size: 16px;
              font-weight: bold;
              color: #007af5;
              border-bottom: 2px solid #007af5;
            }
          }
        }
      }
      .el-main {
        .main {
          // display: flex;
          // justify-content: space-between;
          margin-bottom: 15px;
          .demo-form-inline {
            display: flex;
            height: 34px;
            // max-width: 70%;
            // width: 70%;
            //align-items: center;
            :deep(input::placeholder) {
              font-size: 14px;
              font-weight: 400;
              color: #bbbbbb;
            }
            :deep(.el-form-item) {
              margin-bottom: 0;
              line-height: 34px;
              height: 34px;
              width: 40%;
            }
            :deep(.el-form-item__content) {
              line-height: 34px;
              flex-wrap: nowrap;
              //height: 43px;
              // width: 80%;
              :deep(.inline-input) {
                // width: 230px;
                // height: 34px;
                .el-input__wrapper {
                  :deep(.el-input__inner) {
                    // width: 200px;
                    // height: 34px;
                    background: #ffffff;
                    // border: 1px solid #dddddd;
                    border-radius: 2px;
                  }
                }
              }
              .btn {
                width: 80px;
                height: 34px;
                line-height: 34px;
                background: #007af5;
                border-radius: 2px;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                border: 0;
                cursor: pointer;
                &.reset {
                  margin: 0 10px;
                }
                &.deatil {
                  min-width: 80px;
                }
              }
              #goBack {
                max-width: 131px;
                height: 34px;
                background: #007af5;
                border-radius: 2px;
                border: 0;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                cursor: pointer;
                box-sizing: border-box;
              }
              .el-dropdown {
                margin: 0px 10px;
                cursor: pointer;
              }
              .el-dropdown-link {
                // display: inline-block;
                width: 80px;
                height: 34px;
                line-height: 34px;
                text-align: center;
                color: #fff;
                background: #007af5;
                border-radius: 2px;
              }
            }

            :deep(.el-form-item__label) {
              // color: #6fd7f7;
              font-size: 14px;
              font-weight: 400;
              color: #46545d;
              height: 34px;
              line-height: 34px;
            }
            &.first {
              margin-bottom: 10px;
            }
          }
          .button {
            display: flex;
            justify-content: space-around;
            max-width: 40%;
            .btn {
              width: 80px;
              height: 34px;
              line-height: 34px;
              background: #007af5;
              border-radius: 2px;
              font-size: 12px;
              font-weight: 400;
              color: #ffffff;
              border: 0;
              padding: 0;
              cursor: pointer;
              &.reset {
                margin: 0 10px;
              }
            }
            #goBack {
              max-width: 131px;
              height: 34px;
              background: #007af5;
              border-radius: 2px;
              border: 0;
              font-size: 12px;
              font-weight: 400;
              color: #ffffff;
              cursor: pointer;
            }
            .el-dropdown {
              margin: 0px 10px;
              cursor: pointer;
            }
            .el-dropdown-link {
              // display: inline-block;
              width: 80px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              color: #fff;
              background: #007af5;
              border-radius: 2px;
            }
          }
        }

        .tableBox {
          height: calc(100% - 100px);
          background: #fff;
          // padding: 20px;
          box-sizing: border-box;
          //overflow: hidden;
          .desc {
            font-size: 12px;
            font-weight: 400;
            color: #ec4b5a;
            background: #fbdbde;
            line-height: 33px;
            height: 33px;
            text-align: center;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 16px;
              height: 16px;
              // margin: auto;
              margin-right: 10px;
            }
          }
          .table {
            // background: rgba(0, 0, 0, 0.1);
            height: calc(100% - 93px);
            width: 100%;
            margin-bottom: 15px;
            :deep(.el-table-column--selection.is-leaf .el-checkbox) {
              display: none;
            }
            :deep(.el-table__cell.is-leaf) {
              //background: rgba(0, 0, 0, 0.1);
              // color: #6fd7f7;
              //color: #fff;
              color: #929ea8;
            }

            :deep(tr:hover > td) {
              background-color: transparent;
            }
            :deep(.el-table__empty-text) {
              //color: #fff;
              color: #929ea8;
            }
            :deep(td.el-table__cell) {
              //color: #fff;
              color: #929ea8;
            }
          }
          .el-pagination {
            height: 34px;
            padding: 0;
            box-sizing: border-box;
            //width: 50%;
            :deep(.el-pagination__total) {
              font-size: 14px;
              font-weight: 400;
              color: #bbbbbb;
              line-height: 34px;
            }

            :deep(.el-input__inner) {
              height: 34px;
              //width: 60px;
              background: #fff;
              //color: #66b1ff;
              color: #46545d;
            }
            :deep(button:disabled) {
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              //color: #66b1ff;
              color: #46545d;
              box-sizing: border-box;
            }
            :deep(.el-pager li) {
              //background: rgba(0, 0, 0, 0.1);
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              //color: #66b1ff;
              color: #46545d;
              box-sizing: border-box;
              &.active {
                // color: #fff;
                color: #46545d;
              }
            }
            :deep(.btn-prev) {
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              //color: #66b1ff;
              color: #46545d;
              box-sizing: border-box;
            }
            :deep(.btn-next) {
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              //color: #66b1ff;
              color: #46545d;
              box-sizing: border-box;
            }
            :deep(span:not([class*="suffix"])) {
              color: #bbbbbb;
            }
            .el-pagination__jump {
              height: 34px;
              line-height: 34px;
            }
          }
        }
      }
    }
  }
}
</style>
